<template>
	<div>
		<el-row type="flex">
			<el-col :span="12" style="text-align: left;">
				<el-button type="danger" plain @click="delMore()">批量删除</el-button>
			</el-col>
			<el-col :span="12">
				<div class="grid-content bg-purple-dark">
					<el-input placeholder="请输入内容" v-model="input3" class="input-with-select" show-word-limit>
						<el-select v-model="select" slot="prepend" placeholder="请选择">
							<el-option label="货运单号" value="danhao">

							</el-option>

						</el-select>
						<el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
					</el-input>
				</div>
			</el-col>
		</el-row>


		<el-row type="flex">
			<el-col :span="24">
				<div class="grid-content bg-purple-dark">
					<el-table :data="tableData" border style="width: 100%;" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column fixed prop="fid" label="货运单编号" width="250">
						</el-table-column>
						<el-table-column prop="name" label="客户姓名" width="120">
						</el-table-column>
						<el-table-column prop="tel" label="客户电话" width="120">
						</el-table-column>
						<el-table-column prop="status" label="类别" width="80">
							<template slot-scope="scope">
								<span v-if="scope.row.status == 0">待发货</span>
								<span v-if="scope.row.status == 1">运输</span>
								<span v-if="scope.row.status == 2">中转</span>
								<span v-if="scope.row.status == 3">到货</span>
								<span v-if="scope.row.status == 4">提货</span>
								<span v-if="scope.row.status == 5">已提</span>
							</template>
						</el-table-column>
						<el-table-column prop="noticeContent" label="回告内容" width="320">
						</el-table-column>
						<el-table-column prop="notifier" label="填写人" width="100">
						</el-table-column>
						<el-table-column prop="noticeTime" label="回告时间" width="170">

						</el-table-column>
						<el-table-column prop="issuccess" label="是否成功" width="100">
							<template slot-scope="scope">
								<span v-if="scope.row.issuccess == false">成功</span>
								<span v-if="scope.row.issuccess == true">失败</span>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="120">
							<template slot-scope="scope">
								<el-button type="danger" plain size="small" @click="del(scope.$index)">
									删除历史
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="block">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5,10]" :page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="total">
						</el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	//输入框
	export default {

		data() {
			return {
				input3: '',
				select: '',
				//表格
				tableData: [],
				multipleSelection: [],
				//分页
				currentPage: 1,
				pageSize: 5,
				total: 5,
			}
		},

		created() {
			//查询所有:第一页
			this.getPageChange();
			//查询总条数
			this.getTotal();
			console.log(this.tableData)

		},
		//表格方法
		methods: {
			//模糊搜索:
			search() {

				this.axios.post("http://localhost:8080/reply/" + this.input3)
					.then((res) => {
						this.tableData = [];
						let sqlData = res.data.data;
						console.log(sqlData)
						this.tableData.push({
							fid: sqlData.fid,
							name: sqlData.fc.customerIn.name,
							tel: sqlData.fc.customerIn.tel,
							status: sqlData.fc.freightStatus.status,
							noticeContent: sqlData.noticeContent,
							notifier: sqlData.notifier,
							noticeTime: this.timeTrans(sqlData.noticeTime),
							issuccess: sqlData.issuccess,
							id: sqlData.id
						})


						this.total = 1;
					});



			},
			//获取总条数：
			getTotal() {
				this.axios.get("http://localhost:8080/reply/", "")
					.then((res) => {

						let sqlData = res.data.data;

						this.total = sqlData.length;
					})
			},
			//分页查询
			getPageChange() {
				this.axios.get("http://localhost:8080/reply/" + this.currentPage + "/" + this.pageSize, )
					.then((res) => {

						let sqlData = res.data.data.list;
						console.log(sqlData[0].fc)
						for (let i = 0; i < sqlData.length; i++) {

							this.tableData.push({
								fid: sqlData[i].fid,
								name: sqlData[i].fc.customerIn.name,
								tel: sqlData[i].fc.customerIn.tel,
								status: sqlData[i].fc.freightStatus.status,
								noticeContent: sqlData[i].noticeContent,
								notifier: sqlData[i].notifier,
								noticeTime: this.timeTrans(sqlData[i].noticeTime),
								issuccess: sqlData[i].issuccess,
								id: sqlData[i].id
							})


						}



					})
			},
			handleClick(row) {
				console.log(row);
			},
			//格式化时间
			timeTrans(time) {
				let date = new Date(new Date(time).getTime() + 8 * 3600 * 1000)
				date = date.toJSON();


				date = date.substring(0, 19).replace('T', ' ')

				return date;
			},
			//分页方法
			handleSizeChange(val) {
				this.tableData = [];
				this.pageSize = val;
				this.getPageChange();

			},
			handleCurrentChange(val) {

				this.tableData = [];
				this.currentPage = val;
				this.getPageChange();
			},
			//删除方法
			del(index) {

				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//删除数据库对应数据
					this.axios.delete("http://localhost:8080/reply/" + this.tableData[index].id, "")
						.then((res) => {
							this.getTotal();
						})
					// console.log(this.tableData[index].name)
					this.tableData.splice(index, 1);
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//多选的值存到数组
			handleSelectionChange(val) {

				this.multipleSelection = val;

			},
			//批量删除
			delMore() {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const length = this.multipleSelection.length;


					for (let i = 0; i < length; i++) {
						for (let j = 0; j < this.tableData.length; j++) {
							if (this.multipleSelection[i] == this.tableData[j]) {
								//删除后端数据
								this.axios.delete("http://localhost:8080/reply/" + this.tableData[j].id, "")
									.then((res) => {

									})

								//删除前端页面
								this.tableData.splice(j, 1);
								//刷新总条数
								this.getTotal();

							}


						}
					}

					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}




	}
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	.el-select .el-input {
		width: 130px;

	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}

	.block {
		background-color: #ffffff;
	}
</style>
